<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./foot.css">
    <link rel="stylesheet" href="./font/font-awesome.min.css">
    <script src="./book.js"></script>
    <style>
        body {
            background-color: rgb(244, 245, 247);
        }

        .shop_car {
            position: fixed;
            top: 25%;
            left: 50%;
            transform: translate(-50%, -50%)
        }

        .empty_text {
            width: 300px;
            text-align: center;
            color: rgb(168, 160, 155);
            position: fixed;
            top: 45%;
            left: 50%;
            transform: translate(-50%, -50%)
        }

        .shop_box {
            height: 200px;
            background-color: #fff;
            display: flex;
            margin-bottom: 10px;
        }

        .fa-check-circle-o,
        .fa-check-circle {
            font-size: 30px;
            line-height: 200px;
            margin: 0 20px;
        }

        .fa-check-circle {
            color: rgb(25, 137, 250);
        }

        .book {
            display: flex;
            position: relative;
        }

        .book img {
            width: 120px;
            height: 120px;
            margin-top: 10px;
        }

        .recommend {
            font-size: 14px;
            width: 80px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            color: white;
            background-color: red;
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
            position: absolute;
            top: 20px;
        }

        .book h4 {
            margin-top: 10px;
        }

        .book p {
            flex-wrap: wrap;
            width: 180px;
            color: rgb(180, 166, 150);
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            margin-top: -15px;
        }

        .book_text span:nth-child(1) {
            font-size: 20px;
            color: red;
            font-weight: bold;
        }

        .book_text del {
            font-size: 14px;
            margin-left: 8px;
            color: rgb(110, 108, 103);
        }

        .book_text span:nth-of-type(2) {
            font-size: 18px;
            color: rgb(110, 108, 103);
            margin-left: 60px;
        }

        .book_text span:nth-of-type(5) {
            font-size: 18px;
            color: rgb(110, 108, 103);
            margin-left: 3px;
        }

        .del,
        .add,
        .remove {
            width: 60px;
            height: 25px;
            background-color: #fff;
            border: 1px solid rgb(235, 237, 240);
            position: absolute;
            bottom: 25px;
            font-size: 18px;
        }

        .add {
            left: 70px;
        }

        .remove {
            font-size: 16px;
            left: 220px;
            color: white;
            background-color: red;
        }

        ul {
            padding-inline-start: 0;
            /* 去除ul自带的左侧空白 */
        }

        .amount {
            width: 100%;
            height: 50px;
            background-color: #fff;
            position: fixed;
            bottom: 53px;
            display: flex;
            font-size: 16px;
            line-height: 50px;
        }

        .amount #All {
            line-height: 50px;
            margin-right: 10px;
        }

        .amount_text {
            position: fixed;
            left: 130px;
        }

        .buy {
            width: 100px;
            height: 40px;
            line-height: 40px;
            position: fixed;
            bottom: 58px;
            left: 260px;
            border-radius: 20px;
            border: none;
            background-color: blue;
            color: white;
            font-size: 18px;
        }

        .amount_text span {
            color: red;
        }

        .amount_text .price {
            font-size: larger;
            color: red;
        }

        a {
            text-decoration: none;
            color: #000;
        }

        .bottom_box {
            height: 100px;
            position: relative;
            bottom: 0;
        }
    </style>
</head>

<body>
    <!-- <img class="shop_car" src="../移动书城页面/img/empty.png" alt="">
    <div class="empty_text">购物车为空，记得买点东西犒劳自己哦~</div> -->
    <ul>
        <!-- <li class="shop_box">
            <i class="fa fa-check-circle-o"></i>
            <i class="fa fa-check-circle"></i>
            <div class="book">
                <img src="http://img3m2.ddimg.cn/1/6/29239552-1_w_18.jpg" alt="">
                <div class="recommend">聚星推荐</div>
                <div class="book_text">
                    <h4>字母表谜案</h4>
                    <p>当你隐隐觉得不对劲，致命的恶意正悄悄逼近！一座神秘的公寓，不定期举行推当你隐隐觉得不对劲，致命的恶意正悄悄逼近！一座神秘的公寓，不定期举行推当你隐隐觉得不对劲，致命的恶意正悄悄逼近！一座神秘的公寓，不定期举行推
                    </p>
                    <div><span>￥<span class="price">32</span></span><del>￥42</del><span>x</span><span
                            class="num">3</span></div>
                </div>
                <button class="del">-</button>
                <button class="add">+</button>
                <button class="remove">删除</button>
            </div>
        </li> -->
    </ul>
    <div class="bottom_box"></div>
    <div class="amount">
        <i class="fa fa-check-circle-o" id="All"></i>全选
        <div class="amount_text">合计：<span>￥<span class="sum_price">0</span>.00</span>
        </div>
        <button class="buy">购买</button>
    </div>
    <footer>
        <div class="foot_box1">
            <img src="../移动书城页面/img/icon_book_noselected.png" alt=""><a href="./HomePage.html">首页</a>
        </div>
        <div class="foot_box4">
            <img src="./img/icon_sort_noselected.png" alt=""><a href="./classification.html">分类</a>
        </div>
        <div class="foot_box2">
            <img src="./img/icon_car_selected.png" alt=""><a>购物车</a>
        </div>
        <div class="foot_box3">
            <img src="./img/icon_mine_noselected.png" alt=""><a href="./me.html">我的</a>
        </div>
    </footer>
</body>
<script>

    const body = document.body
    if (JSON.parse(localStorage.getItem("items")) === null) {
        body.innerHTML = `
            <img class="shop_car" src="../移动书城页面/img/empty.png" alt="">
            <div class="empty_text">购物车为空，记得买点东西犒劳自己哦~</div>
            <footer>
                <div class="foot_box1">
                    <img src="../移动书城页面/img/icon_book_noselected.png" alt=""><a href="./HomePage.html">首页</a>
                </div>
                <div class="foot_box4">
                    <img src="../移动书城页面/img/icon_sort_noselected.png" alt=""><a href="./classification.html">分类</a>
                </div>
                <div class="foot_box2">
                    <img src="../移动书城页面/img/icon_car_selected.png" alt=""><a>购物车</a>
                </div>
                <div class="foot_box3">
                    <img src="../移动书城页面/img/icon_mine_noselected.png" alt=""><a href="./me.html">我的</a>
                </div>
            </footer>
        `
    } else {

        const ul = document.querySelector('ul')
        // const li = document.querySelectorAll('li')

        const All = document.querySelector('.amount i')

        // 购物车内容模块

        const Id = JSON.parse(localStorage.getItem("items")).map((item) => {
            return item.id
        })

        var newArr = Id.filter(function (item, index) {
            return Id.indexOf(item) === index;  // 因为indexOf 只能查找到第一个  
        });


        const [{ id, bookName, author, originalPrice, presentPrice, content, thumbSrc, detailSrc }] = books
        for (let i = 0; i < newArr.length; i++) {

            let li = document.createElement('li')
            ul.appendChild(li)
            li.classList.add('shop_box')

            for (let index = 0; index < books.length; index++) {

                if (newArr[i] === (books[index].id - 1)) {
                    //     for (let t = 0; t < Id.length; t++) {
                    //         if (newArr !== null) {
                    //             if (newArr[t] === Id[t]) {
                    //                 num[index] += 1
                    //             }
                    //         }
                    //     }

                    li.innerHTML = `
                    <i class="fa fa-check-circle-o"></i>
                    <!-- <i class="fa fa-check-circle"></i> -->
                    <div class="book">
                        <img src=${books[index].thumbSrc} alt="">
                        <div class="recommend">聚星推荐</div>
                        <div class="book_text">
                            <h4>${books[index].bookName}</h4>
                            <p>${books[index].content}
                            </p>
                            <div><span>￥<span class="price">${books[index].presentPrice}</span></span><del>￥${books[index].originalPrice}</del><span>x</span><span
                                    class="num">1</span></div>
                        </div>
                        <button class="del">-</button>
                        <button class="add">+</button>
                        <button class="remove">删除</button>
                    </div>
                `
                }

            }
        }
        const lis = document.querySelectorAll('li i')
        const del = document.querySelectorAll('.del')
        let add = document.querySelectorAll('.add')
        const rm = document.querySelectorAll('.remove')
        const num = document.querySelectorAll('.num')
        // 全选模块
        All.addEventListener('click', function () {
            for (let index = 0; index < lis.length; index++) {
                if (lis[index].className !== 'fa fa-check-circle') {
                    All.className = 'fa fa-check-circle'
                    lis[index].className = 'fa fa-check-circle'
                } else {
                    All.className = 'fa fa-check-circle-o'
                    lis[index].className = 'fa fa-check-circle-o'
                }
            }
        })

        // 勾选模块
        for (let index = 0; index < lis.length; index++) {
            lis[index].onclick = function () {
                if (lis[index].className === 'fa fa-check-circle-o') {
                    lis[index].className = 'fa fa-check-circle'
                } else {
                    lis[index].className = 'fa fa-check-circle-o'
                }
                let flag = true
                for (let index = 0; index < lis.length; index++) {
                    if (lis[index].className === 'fa fa-check-circle-o') {
                        flag = false
                    }
                }
                if (flag) {
                    All.className = 'fa fa-check-circle'
                } else {
                    All.className = 'fa fa-check-circle-o'
                }
            }
        }


        // 减少模块
        const price = document.querySelectorAll('.price')
        let sum = document.querySelector('.sum_price')
        for (let i = 0; i < del.length; i++) {
            console.log(num[i].innerText);
            del[i].addEventListener('click', function () {

                if ((num[i].innerText * 1) > 0) {
                    num[i].innerHTML = (num[i].innerText * 1) - 1
                }
                let sums = (sum.innerHTML * 1)
                sums -= (price[i].innerHTML * 1)
                sum.innerHTML = sums
            })
        }

        // 添加模块
        for (let i = 0; i < add.length; i++) {

            add[i].addEventListener('click', function () {
                console.log(add[i]);
                if ((num[i].innerText * 1) >= 0) {
                    num[i].innerHTML = (num[i].innerText * 1) + 1
                }
                let sums = (sum.innerHTML * 1)
                sums += (price[i].innerHTML * 1)
                sum.innerHTML = sums
            })
        }

        // 删除模块
        for (let i = 0; i < rm.length; i++) {
            rm[i].addEventListener('click', function () {
                li[i].remove()
            })

        }

        // 合计模块
        // const price = document.querySelectorAll('.price')
        // let sum = document.querySelector('.sum_price')
        for (let i = 0; i < price.length; i++) {
            let sums = (sum.innerHTML * 1)
            sums += (price[i].innerHTML * 1) * (num[i].innerHTML * 1)
            sum.innerHTML = sums
        }
    }


</script>

</html>